<template>
  <div @scroll="handleScrollChange" class="layout-wrap">
    <el-container>
      <TopHead v-if="scorllVal < 120"></TopHead>
      <el-affix v-else :offset="0">
        <FixedHead></FixedHead>
      </el-affix>
      <div
        :style="{
          'margin-top': scorllVal >= 120 ? '120px' : '0',
        }"
      >
        <router-view :scorllVal="scorllVal"></router-view>
      </div>
      <el-footer>
        <FootContent></FootContent>
      </el-footer>
    </el-container>
    <LoginDialog :show="showLoginDialog" @close="handleClose" />
  </div>
</template>

<script setup>
import { onMounted, ref, computed, watch } from 'vue'
import LoginDialog from '@/components/Header/login-dialog.vue'
import { useLoginStore } from '@/stores/login'
const loginStore = useLoginStore()
let showLoginDialog = computed(() => loginStore.showLoginDialog)
onMounted(() => {})
let scorllVal = ref(0)
const handleScrollChange = (e) => {
  scorllVal.value = e.target.scrollTop
}
function handleClose (val) {
  loginStore.hide()
}
</script>

<style lang="scss" scoped>
.layout-wrap {
  display: flex;
  flex: auto;
  flex-direction: column;
  min-height: 0;
  background: #f5f5f5;
  overflow: auto;
}
.el-footer {
  padding: 0px 0px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  background: #f5f5f5;
  background-color: rgba(51, 51, 51, 1);
  min-height: 200px;
  margin-top: auto !important;
}
</style>
